<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-09-28 09:41:14
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-09-28 10:41:22
 * @FilePath: \app\src\components\mapbox\mapContainer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div id="mapContainer"></div>
</template>

<script>
// import mapboxGl from 'mapbox-gl'
/* global mapboxgl */
export default {
	name: 'mapContainer',
	components: {},
	data() {
		return {}
	},
	mounted() {
		document.title = '地图'
		this.initMap()
	},
	methods: {
		initMap() {
			let gaode = window.dataManage.gaode
			const map = new mapboxgl.Map({
				container: 'mapContainer', // container ID
				style: gaode,
				center: [114.3, 30.5],
				zoom: 5,
				projection: 'globe',
			})
			console.log('map', map)
		},
	},
}
</script>

<style lang="less" scoped>
#mapContainer {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>
